<template>
  <Layout style="height:100%" class="main">
    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
      <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
          <img v-show="collapsed" :src="minLogo" key="min-logo" />
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con" v-if="this.$route.name !== 'set-expo' && this.$route.name !== 'set-up'" style="height: 55px;line-height: 55px;">
          <!--<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">-->
            <!--<user :user-avator="userAvator"/><p style="margin-right: 15px;font-size: 14px;">{{userName}}</p>-->
            <!--<language @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>-->
            <!--<fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>-->
          <!--</header-bar>-->
        <div class="clearfix">
          <p style="float: left;font-size: 16px;color:#333;">{{this.$route.meta.title}}</p>
          <div style="float: right;margin-right: 20px;">
            <p style="float: left;font-size: 16px;color:#333;margin-right: 15px;"> 登录名：{{userName}}</p>
            <user :user-avator="userAvator"/>
          </div>
        </div>
      </Header>
      <Layout class="main-layout-con">
        <!--<div class="tag-nav-wrapper" v-if="this.$route.name !== 'set-expo' && this.$route.name !== 'set-up'">-->
        <!--<tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>-->
        <!--</div>-->
        <Content class="content-wrapper" :style="{padding:this.$route.name !== 'set-expo' && this.$route.name !== 'set-up' ? '18px!important' : '0px'}">
          <router-view :key="$route.fullPath"></router-view>
        </Content>
      </Layout>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import routers from '@/router/routers'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import { mapMutations, mapActions } from 'vuex'
import { getNewTagList, getNextRoute, routeEqual, getRoute } from '@/libs/util'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'

import './main.less'
export default {
	name: 'Main',
	components: {
		SideMenu,
		HeaderBar,
		Language,
		TagsNav,
		Fullscreen,
		User
	},
	data() {
		return {
		    menus_list:[],
			collapsed: false,
			minLogo,
			maxLogo,
			isFullscreen: false,
		}
	},
	computed: {
		tagNavList() {
			return this.$store.state.app.tagNavList
		},
		tagRouter() {
			return this.$store.state.app.tagRouter
		},
		userAvator() {
			return 'https://img.cyjxy.com/FiWWB3DpGv4IrhGUNoHy4gpEdFVB.png'
		},
        userName() {
		    return this.$store.state.user.userName
        },
		cacheList() {
			return this.tagNavList.length
				? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name)
				: []
		},
		menuList() {

		    for(var i=0;i<(this.$store.getters.menuList.length);i++){
		        if(this.$store.getters.menuList[i]['name']=='exhibition_list'){
                    //this.$delete(this.$store.getters.menuList,6)
                    //delete this.$store.getters.menuList[i]
                    this.menus_list[0] = this.$store.getters.menuList[i];
                }
            }
			return this.menus_list
		},
		local() {
			return this.$store.state.app.local
		},
	},
	methods: {
		...mapMutations(['setBreadCrumb', 'setTagNavList', 'addTag', 'setLocal']),
		...mapActions(['handleLogin']),
		turnToPage(route) {
			let { name, params, query } = {}
			if (typeof route === 'string') name = route
			else {
				name = route.name
				params = route.params
				query = route.query
			}
			if (name.indexOf('isTurnByHref_') > -1) {
				window.open(name.split('_')[1])
				return
			}
			this.$router.push({
				name,
				params,
				query,
			})
		},
		handleCollapsedChange(state) {
			this.collapsed = state
		},
		handleCloseTag(res, type, route) {
			let user = JSON.parse(localStorage.getItem('user_admin'))
			if (this.tagNavList.length == 1 && route.name == user.first_access) {
				return false;
			}
			let openName = ''
			if (type === 'all') {
				this.turnToPage(user.first_access)
				openName = user.first_access
			} else if (routeEqual(this.$route, route)) {
				if (type === 'others') {
					openName = route.name
				} else {
					const nextRoute = getNextRoute(this.tagNavList, route)
					if (nextRoute != undefined) {
						this.$router.push(nextRoute)
						openName = nextRoute.name
					} else {
						this.turnToPage(user.first_access)
						openName = user.first_access
					}
				}
			}
			this.setTagNavList(res)
			this.$refs.sideMenu.updateOpenName(openName)
		},
		handleClick(item) {
		    if(item.path){
		        return this.$router.push({
                    path: item.path
                })
            }
			this.turnToPage(item)
		}
	},
	watch: {
		$route(newRoute) {
			this.setBreadCrumb(newRoute.matched)
			this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
		},
	},
	mounted() {

		/**
		 * @description 初始化设置面包屑导航和标签导航
		 */
		this.setTagNavList()
		//console.log(this.tagNavList)
		if (!this.tagNavList.length) {
			let user = JSON.parse(localStorage.getItem('user_admin'))
			let res = getRoute(user.role,user.first_access,routers)
			this.addTag({
				route: res
			})
		}
		this.setBreadCrumb(this.$route.matched)
		// 设置初始语言
		this.setLocal(this.$i18n.locale)
	},
}
</script>
